<template>
	<el-container>
		<el-tabs type="border-card" class="border-card" @tab-click="tabClick">
			<el-tab-pane v-for="(item,index) in borderCard" :key="index" :label="item.label">
				<el-main class="nopadding" v-if="index == cindex">
					<div class="top-panel" v-if="tableData.length">
						<el-button type="primary" icon="el-icon-plus" @click="add">{{ $t('table_data.addText') }}</el-button>
					</div>
					<scTable v-show="tableData.length" ref="table" :apiObj="apiObj" row-key="id" stripe border :params="sendParams" :hideSetting="true"
						@sortChange="sortChange" :sortType="direction" width="100%" @dataChange="dataChange" :isCover="isCover">
						<el-table-column :label="$t('short_data.table.coverPicture')" width="auto">
							<template #default="scope">
								<img :src="scope.row.coverPicture" style="width: 72px;object-fit: contain;">
							</template>
						</el-table-column>
						<el-table-column :label="$t('short_data.table.shortsName')" width="500">
							<template #default="scope">
								{{ setShortName(scope.row.shortName) }}
							</template>
						</el-table-column>
						<el-table-column :label="$t('short_data.table.episode')" width="80">
							<template #default="scope">
								{{ setShortEpi(scope.row) }}
							</template>
						</el-table-column>
						<el-table-column :label="$t('short_data.table.updateTime')" prop="createAt" width="auto" sortable></el-table-column>
						<el-table-column :label="$t('table_data.operate')" width="auto">
							<template #default="scope">
								<el-button-group>
									<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index, item)">{{ $t('table_data.edit') }}</el-button>
									<el-button text type="primary" size="small" @click="table_detail(scope.row, scope.$index)">{{ $t('table_data.detail') }}</el-button>
									<el-button text v-if="index==2" :type="scope.row.status==1||scope.row.status==3?'success':'danger'" size="small" @click="table_opera(scope.row)">{{ scope.row.status==1||scope.row.status==3?$t('banner_data.upload'):$t('banner_data.remove') }}</el-button>
									<el-button text v-if="scope.row.status==3" type="danger" size="small" @click="table_remove(scope.row)">{{ $t('table_data.removedFromShelves') }}</el-button>
									<el-button text v-if="scope.row.status==1" size="small" @click="table_update(scope.row)">{{ $t('table_data.updateFromShelves') }}</el-button>
									<el-button text size="small" @click="table_copy(scope.row)">{{ $t('table_data.copy') }}</el-button>
								</el-button-group>
							</template>
						</el-table-column>
					</scTable>
					<div class="addbox" v-if="!tableData.length" @click="add">
						<img src="img/add_icon.png" alt="">
						<span class="word">{{ $t('short_data.homeUploadText') }}</span>
					</div>
				</el-main>
			</el-tab-pane>
		</el-tabs>
		<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog>
	</el-container>
</template>

<script>
import saveDialog from './client/save'

export default {
	name: "client",
	components: {
		saveDialog
	},
	data() {
		return {
			isCover: false,
			cindex: 0,
			direction: 'sortDirection',
			tableData: [],
			borderCard: [
				{
					type: 1,
					label: this.$t('short_data.all')
				},
				{
					type: 2,
					label: this.$t('short_data.uploaded')
				},
				{
					type: 3,
					label: this.$t('short_data.draft')
				}
			],
			langList: [
				{
					name: '简体中文',
					value: 'zh_CN',
				},
				{
					name: '繁體中文',
					value: 'zh_TW',
				},
				{
					name: 'English',
					value: 'en_US',
				},
				{
					name: '日本語',
					value: 'ja_JP',
				}
			],
			classList: [
				{
					name: this.$t('artwork_data.classification.class1'),
					value: 11,
				},
				{
					name: this.$t('artwork_data.classification.class2'),
					value: 12,
				},
				{
					name: this.$t('artwork_data.classification.class3'),
					value: 13,
				},
				{
					name: this.$t('artwork_data.classification.class4'),
					value: 14,
				},
				{
					name: this.$t('artwork_data.classification.class5'),
					value: 21,
				},
				{
					name: this.$t('artwork_data.classification.class7'),
					value: 15,
				},
				{
					name: this.$t('artwork_data.classification.class6'),
					value: 29,
				}
			],
			tonghList: [
				{
					name: this.$t('table_data.currency.dollar'),
					value: 2,
				},
				{
					name: this.$t('table_data.currency.rmb'),
					value: 3,
				},
				{
					name: this.$t('table_data.currency.jpy'),
					value: 1,
				}
			],
			movieData: [

			],
			theatreData: [

			],
			dialog: {
				save: false
			},
			search: {
				keyword: ""
			},
			apiObj: {},
			selection: [],
			searchKey: null,
			params: {

			},
			sendParams: {

			}
		}
	},
	computed: {
		setShortName(){
			return (e)=>{
				return e&&e[this.$i18n.locale]
			}
		},
		setShortEpi(){
			return (e)=>{
				return this.cindex==2?e.episode:e.episodeCount
			}
		},
	},
	async created() {
		this.apiObj = this.$API.shorts.getShortsList;
	},
	methods: {
		tabClick(obj){
			this.cindex = Number(obj.index);
			// this.tableData = []
			this.isCover = false
			if(obj.index == '2'){
				this.sendParams.status = null;
				this.isCover = true
				this.apiObj = this.$API.shorts.getShortsDraftList;
			}else{
				if(obj.index == '1')this.params.status = 3
				if(obj.index == '0')this.params.status = null
				this.apiObj = this.$API.shorts.getShortsList;
				this.upsearch()
			}
		},
		dataChange(d){
			this.tableData = d.data.list || [];
			console.log('callback',this.tableData);
		},
		sortChange(){

		},
		closeTag(){
			const tagList = this.$store.state.viewTags.viewTags;
			const tag = this.$route;
			const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
			this.$store.commit("removeViewTags", tag)
			this.$store.commit("removeIframeList", tag)
			this.$store.commit("removeKeepLive", tag.name)

			const leftView = tagList[nowTagIndex - 1]
			if (leftView) {
				this.$router.push(leftView)
			} else {
				this.$router.push('/')
			}
		},
		reset() {
			// this.params.currency = null;
			// this.params.movieId = null;
			// this.params.category = null;
			this.params.startDate = null;
			this.params.endDate = null;
			this.params.language = null;
			this.upsearch();
			// this.$refs.table.upData(this.params);
		},
		upsearch() {
			Object.assign(this.sendParams,this.params);
			this.$refs.table[0].upData(this.sendParams);
		},
		//增加
		add() {
			this.$router.push({path:'/shortTable/short/client/save',query:{type:'add','id':'add'}})
			// this.dialog.save = true
			// this.$nextTick(() => {
			// 	this.$refs.saveDialog.open()
			// })
		},
		//编辑
		table_edit(row, index, item){
			console.log(item,index);
			this.$router.push({path:'/shortTable/short/client/save',query:{type:'edit','id':row.id,'shortId':row.shortId}})
			// this.dialog.save = true
			// this.$nextTick(() => {
			// 	this.$refs.saveDialog.open('edit').setData(row)
			// })
		},
		// 详情
		table_detail(row){
			this.$router.push({path:'/shortTable/short/client/save',query:{type:'detail','id':row.id,shortId: row.shortId}});
			// this.dialog.save = true
			// this.$nextTick(() => {
			// 	this.$refs.saveDialog.open('edit').setData(row)
			// })
		},
		table_copy(row) {
			this.$router.push({path:'/shortTable/short/client/save',query:{type:'copy',  copyShortId: row.shortId}});
		},
		table_remove(row) {
			this.$confirm(this.$t('table_data.deltips3'), this.$t('table_data.tips'), {
				confirmButtonText: this.$t('table_data.editText'),
				cancelButtonText: this.$t('table_data.cancelText'),
				type: 'warning'
			}).then(async () => {
				let res = await this.$API.shorts.removeShort.get(row.shortId);
				if(res.code == 'OK'){
					this.$message.success(this.$t('table_data.delsucc'));
					this.upsearch();
				}else{
					this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
				}
			}).catch(() => {
				
			});
		},
		table_update(row) {
			this.$confirm(this.$t('table_data.deltips4'), this.$t('table_data.tips'), {
				confirmButtonText: this.$t('table_data.editText'),
				cancelButtonText: this.$t('table_data.cancelText'),
				type: 'warning'
			}).then(async () => {
				var res = await this.$API.shorts.publishVideo.get(row.shortId);
				if(res.code == 'OK'){
					this.$message.success(this.$t('table_data.delsucc'));
					this.upsearch();
				}else{
					this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
				}
			}).catch(() => {
				// this.$message({
				// 	type: 'info',
				// 	message: 'cancel'
				// });          
			});
		},
		// 删除操作
		async table_opera(row) {
			this.$confirm(this.$t('table_data.del_text'), this.$t('table_data.tips'), {
				confirmButtonText: this.$t('table_data.editText'),
				cancelButtonText: this.$t('table_data.cancelText'),
				type: 'warning'
			}).then(async () => {
				var res = await this.$API.shorts.delDraftShort.delete(row.id);
				if(res.code == 'OK'){
					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
					this.tabClick({index: '2'})
					this.$message.success(this.$t('table_data.delsucc'))
				}else{
					this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
				}
			}).catch(() => {
				// this.$message({
				// 	type: 'info',
				// 	message: 'cancel'
				// });          
			});
		},
		//批量删除
		async batch_del() {
			this.$confirm(`${this.$t('table_data.deltips1')} ${this.selection.length} ${this.$t('table_data.deltips2')}`, this.$t('table_data.tips'), {
				type: 'warning'
			}).then(() => {
				const loading = this.$loading();
				this.selection.forEach(item => {
					this.$refs.table.tableData.forEach((itemI, indexI) => {
						if (item.id === itemI.id) {
							this.$refs.table.tableData.splice(indexI, 1)
						}
					})
				})
				loading.close();
				this.$message.success(this.$t('table_data.operasucc'))
			}).catch(() => {

			})
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				data.id = new Date().getTime()
				this.$refs.table.tableData.unshift(data)
			} else if (mode == 'edit') {
				this.$refs.table.tableData.filter(item => item.id === data.id).forEach(item => {
					Object.assign(item, data)
				})
			}
		},
		beforeOptions(v){
			if(!this.params.endDate)return false
			return v.getTime() > new Date(this.params.endDate).getTime();//  - 86400000是否包括当天
		},
		backOptions(v){
			return v.getTime() < new Date(this.params.startDate).getTime();//  - 86400000是否包括当天
		},
	}
}
</script>

<style scoped>
.border-card {
	margin: 10px;
	width: 100%;
}
:deep .el-tabs__item {
	font-size: 20px;
	height: 60px;
	line-height: 60px;
}
.addbox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: #333;
	background: #F6F8F9;
	width: 640px;
	height: 480px;
	border: 2px dashed #888;
	border-radius: 5px;
	margin: 100px auto;
	cursor: pointer;
}
.addbox img {
	width: 100px;
}
.addbox span {
	margin-top: 20px;
	text-align: center;
}

.module-filter {
	margin-right: 10px;
}

.el-header {
	--el-header-height: auto;
}

.left-panel {
	flex-wrap: wrap;
	line-height: 50px;
}

.top-panel {
	margin: 10px;
}

:deep .scTable {
	height: calc(100% - 60px) !important;
	min-width: 100% !important;
}
:deep .scTable-table {
	min-width: 100% !important;
}
:deep .scTable .el-table {
	min-width: 100% !important;
}

.el-main.nopadding {
	margin: 0 10px;
}

.el-header {
	margin: 10px;
	border-radius: 4px;
}

@media only screen and (max-width: 820px) and (min-width: 768px) {
	.module-filter {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    margin: 0 10px;
	}
	.btns {
    margin: 10px;
    width: 340px;
    flex-direction: row;
	}
}
</style>
